<style>
  .col-xs-1-5,
  .col-sm-1-5,
  .col-md-1-5,
  .col-lg-1-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .col-xs-1-5 {
    width: 20%;
    float: left;
  }

  @media (min-width: 768px) {
    .col-sm-1-5 {
      width: 20%;
      float: left;
    }
  }

  @media (min-width: 992px) {
    .col-md-1-5 {
      width: 20%;
      float: left;
    }
  }

  @media (min-width: 1200px) {
    .col-lg-1-5 {
      width: 20%;
      float: left;
    }
  }

  a {
    color: #919191;
  }
  .panel {
    border: none;
  }
  .panel-default {
    border-color: transparent;
  }
  .panel-default > .panel-heading {
    background-color: #fff;
  }
  .panel-heading {
    border-bottom: none;
  }

  .card .today {
    display: flex;
    align-items: center;
  }
  .card .today h4 {
    font-weight: 700;
    margin-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .card .today p {
    margin-bottom: 0;
  }

  .card .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card .card-item {
    padding: 10px 20px 20px;
    border-radius: 4px;
  }
  .card .level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
  }
  .card-item .icon {
    display: flex;
    align-items: center;
  }

  .card-item .icon img {
    width: 34px;
    height: 34px;
    margin-right: 5px;
  }

  .count-preview-left {
    padding-left: 0;
    padding-right: 10px;
  }
  .count-preview-right {
    padding-right: 0;
    padding-left: 10px;
  }
  .btn-default.active,
  .btn-default.active.focus {
    background-color: #ffba00;
    border-color: transparent;
    outline: none;
  }

  .nav-tabs {
    border-bottom: none;
  }

  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    background-color: #ffba00;
  }

  a{
    color: #000;
  }
  a:hover{
    color: #000;
  }
</style>
<div class="panel panel-default panel-intro">
  <div class="panel-body" style="background-color: #f3f5f7; padding-top: 0px">
    <!-- 今日数据 -->
    <div class="row">
      <div class="card">
        <div class="panel panel-default">
          <div class="panel-heading header">
            <div class="today">
              <h4>今日数据</h4>
              <p>{php}echo date('Y.m.d');{/php}</p>
            </div>
            <div class="more">
              <a href="report" class="btn-addtabs"
                >详细数据 <span class="glyphicon glyphicon-chevron-right"></span
              ></a>
            </div>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-xs-1-5">
                <div class="bg-warning card-item">
                  <h5>营业额</h5>
                  <h1>¥ {$todayturnover|htmlentities}</h1>
                </div>
              </div>

              <div class="col-xs-1-5">
                <div class="bg-warning card-item">
                  <h5>有效订单</h5>
                  <h1>{$todayvalidorder|htmlentities}</h1>
                </div>
              </div>

              <div class="col-xs-1-5">
                <div class="bg-warning card-item">
                  <h5>订单完成率</h5>
                  <h1>{$orderfulfillmentrate|htmlentities}%</h1>
                </div>
              </div>

              <div class="col-xs-1-5">
                <div class="bg-warning card-item">
                  <h5>平均客单价</h5>
                  <h1>¥ {$averageunitprice|htmlentities}</h1>
                </div>
              </div>

              <div class="col-xs-1-5">
                <div class="bg-warning card-item">
                  <h5>新增用户</h5>
                  <h1>{$newusercount|htmlentities}</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单管理 -->
    <!-- 订单管理 -->
    <div class="row">
      <div class="card" id="ordersManager">
        <div class="panel panel-default">
          <div class="panel-heading header">
            <div class="today">
              <h4>订单管理</h4>
              <p>{php}echo date('Y.m.d');{/php}</p>
            </div>
            <div class="more">
              <a href="orders" class="btn-addtabs"
                >订单明细 <span class="glyphicon glyphicon-chevron-right"></span
              ></a>
            </div>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-xs-1-5">
                <a
                  href="orders"
                  class="btn-addtabs"
                  onclick="localStorage.setItem('status', 2)"
                >
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_daijiedan.png"
                        alt=""
                      />
                      <h4>待接单</h4>
                    </div>
                    <h1 class="text-danger">
                      {$todayawaitingorder|htmlentities}
                    </h1>
                  </div>
                </a>
              </div>

              <div class="col-xs-1-5">
                <a
                  href="orders"
                  class="btn-addtabs"
                  onclick="localStorage.setItem('status', 3)"
                >
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_daipaisong.png"
                        alt=""
                      />
                      <h4>待派送</h4>
                    </div>
                    <h1 class="text-danger">
                      {$todaydeliveredorder|htmlentities}
                    </h1>
                  </div>
                </a>
              </div>

              <div class="col-xs-1-5">
                <a
                  href="orders"
                  class="btn-addtabs"
                  onclick="localStorage.setItem('status', 5)"
                >
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_wancheng.png"
                        alt=""
                      />
                      <h4>已完成</h4>
                    </div>
                    <h1>{$todaycompletedorder|htmlentities}</h1>
                  </div>
                </a>
              </div>

              <div class="col-xs-1-5">
                <a
                  href="orders"
                  class="btn-addtabs"
                  onclick="localStorage.setItem('status', 6)"
                >
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_quxiao.png"
                        alt=""
                      />
                      <h4>已取消</h4>
                    </div>
                    <h1>{$todaycancelorder|htmlentities}</h1>
                  </div>
                </a>
              </div>

              <div class="col-xs-1-5">
                <a href="orders" class="btn-addtabs">
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_quanbu.png"
                        alt=""
                      />
                      <h4>全部订单</h4>
                    </div>
                    <h1>{$totalorder|htmlentities}</h1>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 总览模块 -->
    <div class="row">
      <!-- 菜品总览 -->
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 count-preview-left">
        <div class="card">
          <div class="panel panel-default">
            <div class="panel-heading header">
              <div class="today">
                <h4>菜品总览</h4>
              </div>
              <div class="more">
                <a href="dish" class="btn-addtabs"
                  >菜品管理
                  <span class="glyphicon glyphicon-chevron-right"></span
                ></a>
              </div>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_yiqishou@2x.png"
                        alt=""
                      />
                      <h4>已起售</h4>
                    </div>
                    <h1>{$dishsale|htmlentities}</h1>
                  </div>
                </div>

                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_yitingshou@2x.png"
                        alt=""
                      />
                      <h4>已停售</h4>
                    </div>
                    <h1>{$dishsold|htmlentities}</h1>
                  </div>
                </div>

                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <button id="addDish" type="button" class="btn btn-warning">
                    新增菜品
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 套餐总览 -->
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 count-preview-right">
        <div class="card">
          <div class="panel panel-default">
            <div class="panel-heading header">
              <div class="today">
                <h4>套餐总览</h4>
              </div>
              <div class="more">
                <a href="setmeal" class="btn-addtabs"
                  >套餐管理
                  <span class="glyphicon glyphicon-chevron-right"></span
                ></a>
              </div>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_yiqishou@2x.png"
                        alt=""
                      />
                      <h4>已起售</h4>
                    </div>
                    <h1>{$setmealsale|htmlentities}</h1>
                  </div>
                </div>

                <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                  <div class="bg-warning card-item level">
                    <div class="icon">
                      <img
                        src="__CDN__/assets/img/icons/gzt_yitingshou@2x.png"
                        alt=""
                      />
                      <h4>已停售</h4>
                    </div>
                    <h1>{$setmealsold|htmlentities}</h1>
                  </div>
                </div>

                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <button id="addSetmeal" type="button" class="btn btn-warning">
                    新增套餐
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="row">
      <div class="card">
        <div class="panel panel-default">
          <div class="panel-heading header">
            <div class="today">
              <h4>订单信息</h4>
            </div>
            <div class="">
              <!-- <div class="btn-group" data-toggle="tab">
                <label class="btn btn-default active">
                  <input
                    type="radio"
                    name="orderOptions"
                    value="daijiedan"
                    autocomplete="off"
                  />
                  待接单
                </label>
                <label class="btn btn-default">
                  <input
                    type="radio"
                    name="orderOptions"
                    value="daipaisong"
                    autocomplete="off"
                    checked
                  />
                  待派送
                </label>
              </div> -->
              <ul class="nav nav-tabs">
                <li class="active" data-status="2">
                  <a href="#2" data-toggle="tab">待接单</a>
                </li>
                <li data-status="3">
                  <a href="#3" data-toggle="tab">待派送</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-body" style="padding-top: 0">
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                  <table
                    id="table"
                    class="table table-striped table-bordered table-hover table-nowrap"
                    width="100%"
                  ></table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
